<script>
  import dayjs from "dayjs";
  import relativeTime from "dayjs/plugin/relativeTime";
  import "dayjs/locale/zh-cn";
  import config from '../routes/_config';
  dayjs.extend(relativeTime);
  dayjs.locale("zh-cn");
  export let movie;
</script>

<style>
  .video_tags {
    position: relative;
    height: 20px;
    margin-right: -10px;
    margin-bottom: 8px;
    overflow: hidden;
    letter-spacing: -3px;
  }
  .video_tags .tag {
    display: inline-block;
    max-width: 90px;
    margin-right: 8px;
    padding: 0 8px;
    overflow: hidden;
    border-radius: 20px;
    background: #eee;
    color: #333;
    font-size: 12px;
    letter-spacing: normal;
    line-height: 20px;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
  }
  .two-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    font-size: 0.85rem;
  }
</style>

<div class="side-card d-flex position-relative mb-3">
  <div class="left-poster mr-2 flex-shrink-0" style="width:140px;height:80px;overflow: hidden;">
    <img src="{config.imgHost}/uploads/400/{movie.img}" alt={movie.title} />
  </div>
  <div class="right-info">
    <a href="/movie/{movie._id}" class="stretched-link" title="{movie.title}">
      <h3 class="two-lines mb-1">{movie.title}</h3>
    </a>
    <div class="video_tags mb-1">
      {#each movie.types as tag}
        <span class="tag bg-secondary text-white">{tag.tag}</span>
      {/each}
    </div>
    <p class="description font-weight-normal mb-0" style="font-size:12px;">
      {dayjs().from(dayjs(movie.meta.createAt))}
    </p>
  </div>
</div>
